(function() {
    showDateChoosePage = function() {
        var scroll_self = true;
        var indexY = 2
          , indexM = 2;

        var li_height = 38;

        yearScroll = null;
        monthScroll = null;

        var $total_data = DOMUtil.getElementsByClassName('total_data')[0];
        var $date_choosed = DOMUtil.getElementsByClassName('date_choosed')[0];

        var _today = new Date();
        var dateInfo = eval('(' + $total_data.getAttribute('dateInfo') + ')');
        var current_year = _today.getFullYear(), current_month = _today.getMonth() + 1;
        var begin_year = current_year - 1, begin_month = current_month;
        var end_year = 2020, end_month = 12;
        var choosed_year = current_year, choosed_month = current_month;
        if ($date_choosed) {
            var y = $date_choosed.getAttribute('year');
            var m = $date_choosed.getAttribute('month');
            choosed_year = y ? y : choosed_year;
            choosed_month = m ? m : choosed_month;
        }
        if (dateInfo) {
            end_year = dateInfo.endYear ? dateInfo.endYear : end_year;
            end_month = dateInfo.endMonth ? dateInfo.endMonth : end_month;
        }

        CreateDateUI();
        init_iScrll();
        function init_iScrll() {
            var strY = $("#yearwrapper ul li:eq(" + indexY + ")").html()
                            .substr(0, $("#yearwrapper ul li:eq(" + indexY + ")").html().length - 1);
            var strM = $("#monthwrapper ul li:eq(" + indexM + ")").html()
                            .substr(0, $("#monthwrapper ul li:eq(" + indexM + ")").html().length - 1);
            var y, m;
            yearScroll = new iScroll("yearwrapper",{
                snap: "li",
                vScrollbar: false,
                onScrollEnd: function() {
                    indexY = window.birthY = (this.y / li_height) * (-1) + 2;
                    y = $("#yearwrapper ul").find("li").eq((-yearScroll.y / li_height) + 2).attr("data-y"),
                    choosed_year = y;
                    $("#monthwrapper ul").html(createMONTH_UL());
                    monthScroll.refresh();
                    m = $("#monthwrapper ul").find("li").eq((-monthScroll.y / li_height) + 2).attr("data-m");
                    choosed_month = m;
                }
            });
            monthScroll = new iScroll("monthwrapper",{
                snap: "li",
                vScrollbar: false,
                onScrollEnd: function() {
                    indexM = window.birthM = (this.y / li_height) * (-1) + 2;
                    y = $("#yearwrapper ul").find("li").eq((-yearScroll.y / li_height) + 2).attr("data-y"),
                    m = $("#monthwrapper ul").find("li").eq((-monthScroll.y / li_height) + 2).attr("data-m");
                    choosed_year = y;
                    choosed_month = m;
                }
            }); 

            var tempY = choosed_year;
            var tempM = choosed_month;
            var sy = $("#yearwrapper ul").find('li[data-y="' + tempY + '"]').index()
              , sm = $("#monthwrapper ul").find('li[data-m="' + tempM + '"]').index();
            yearScroll.scrollTo(0, sy * li_height - li_height * 2, 100, true);
            monthScroll.scrollTo(0, sm * li_height - li_height * 2, 100, true);
        }

        function CreateDateUI() {
            var str = '<div id="dateshadow"></div><div id="datePage" class="page"><div id="datemark"><a id="markyear"></a><a id="markmonth"></a><a id="markday"></a></div><div id="timemark"><a id="markhour"></a><a id="markminut"></a><a id="marksecond"></a></div><div id="datescroll"><div id="yearwrapper"><ul>' + createYEAR_UL() + '</ul></div><div id="monthwrapper"><ul>' + createMONTH_UL() + '</ul></div>';
            $("#datePlugin").html(str)
        }
        function createYEAR_UL() {
            var str = "<li>&nbsp;</li><li>&nbsp;</li>";
            for (var i = begin_year; i <= end_year; i++) {
                str += '<li data-y="' + i + '">' + i + "年</li>"
            }
            return str + "<li>&nbsp;</li><li>&nbsp;</li>"
        }
        function createMONTH_UL() {
             $("#monthwrapper ul").html("");
            var str = "<li>&nbsp;</li><li>&nbsp;</li>";
            var month1 ;
            var month2 ;
            if (choosed_year == begin_year) {
                month1 = begin_month;
                month2 = 12;
            } else if (choosed_year == end_year) {
                month1 = 1;
                month2 = end_month;
            } else {
                month1 = 1;
                month2 = 12;
            }
            for (var i = month1; i <= month2; i++) {
                str += '<li data-m="' + i + '">' + i + "月</li>"
            }
            return str + "<li>&nbsp;</li><li>&nbsp;</li>"
        }


        var $date_box = DOMUtil.getElementsByClassName('date_box')[0];
        var $close = DOMUtil.getElementsByClassName('close',$date_box)[0];
        var $success = DOMUtil.getElementsByClassName('success', $date_box)[0];

        $close.onclick = function(e) {
            $date_box.style.display = 'none';
        }


        var $content = DOMUtil.getElementsByClassName('content')[0];
        var $show_date = DOMUtil.getElementsByClassName('show_date', $content)[0];
        var $date_box_show = DOMUtil.getElementsByClassName('date_box_show', $show_date)[0];

        var choosedData;
        $date_box_show.onclick = function(e) {
            $date_box.style.display = 'block';
            choosedData = showDateChoosePage();
            
            
        }

        $success.onclick = function(e) {
            var year = choosed_year;
            var month = choosed_month;

            $date_box.style.display = 'none';
            if (year && month) {
                $total_data.setAttribute('choosed_year', year);
                $total_data.setAttribute('choosed_month', month);
                format({'year': year, 'month': month, 'day': 1});
            } else {
                format();
            }
        }
    };

    showDateChoosePage();
})(Zepto);
